<template>
  <el-dialog
    class="rectification-model"
    :title="title"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(800)"
    :before-close="handleCancel">
    <div class="content">
      <div class="detail">
        <el-row :gutter="24">
          <el-col :span="4"><span>位置：</span></el-col>
          <el-col :span="8">
            <span class="text">{{ options.location }}</span>
          </el-col>
          <el-col :span="4"><span>检查类型：</span></el-col>
          <el-col :span="8">
            <span class="text">{{ options.checktype && options.checktype.name }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="4"><span>存在问题：</span></el-col>
          <el-col :span="20">
            <span class="text">{{ options.problem }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="4"><span>严重程度：</span></el-col>
          <el-col :span="8">
            <span class="text">{{ options.levelStr }}</span>
          </el-col>
          <el-col :span="4"><span>整改结果：</span></el-col>
          <el-col :span="8">
            <span class="text">{{ options.result }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="4"><span>发起时间：</span></el-col>
          <el-col :span="8">
            <span class="text">{{ options.createdDate }}</span>
          </el-col>
          <el-col :span="4"><span>整改时间：</span></el-col>
          <el-col :span="8">
            <span class="text">{{ options.deadlineDate }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="4"><span>发起人：</span></el-col>
          <el-col :span="8">
            <span class="text">{{ options.sender }}</span>
          </el-col>
          <el-col :span="4"><span>整改人：</span></el-col>
          <el-col :span="8">
            <span class="text">{{ options.rectifymanStr }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="4"><span>通知单：</span></el-col>
          <el-col :span="8">
            <div class="btn">
              <el-button
                type="primary"
                size="mini"
                @click="preview(options.previewImg)">
                预览
              </el-button>
              <el-button
                type="primary"
                size="mini"
                @click="download(options.downloadUrl)">
                下载
              </el-button>
            </div>
          </el-col>
          <el-col :span="4"><span>整改单：</span></el-col>
          <el-col :span="8">
            <div class="btn">
              <el-button
                type="primary"
                size="mini"
                @click="preview(options.previewImg)">
                预览
              </el-button>
              <el-button
                type="primary"
                size="mini"
                @click="download(options.downloadUrl)">
                下载
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="image-container">
        <div class="inspect">
          <img src="" alt="">
        </div>
        <div class="rectification">
          <img src="" alt="">
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    options: {
      type: Object,
      default: () => ({})
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {
    title() {
      const { updated } = this.options;
      let time = '';
      if (updated && updated['$date']) {
        time = updated['$date']['$numberLong'];
        if (time) {
          time = this.$moment(Number(time)).format('yyyy年MM月DD日');
        }
      }
      return `${time || ''}质量巡查`;
    }
  },
  methods: {
    /**
     * 预览图片
     * @param img {String} 图片地址
     */
    preview(img) {
      if (!img) return;
      window.open(img);
    },
    /**
     * 下载单据
     * @param url {String} 地址
     */
    download(url) {
      if (!url) return;
      window.location.href = url;
    },
    handleCancel() {
      this.$emit('cancel', false);
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';

  .rectification-model {
    width: 100%;
    height: 100%;
    .content {
      width: 100%;
      height: 100%;
      .detail {
        /deep/ .el-row {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
        }
        .text {
          min-height: 30px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
      }
      .image-container {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        > div {
          width: 50%;
          height: 100%;
          padding: 20px 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
